<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第11组实习日志</title>
    <style>
        :root {
            --primary-color: #1f1e33;
            --secondary-color: #ffffff;
            --accent-color: #4a4979;
            --text-color: #333333;
            --border-color: #e0e0e0;
            --success-color: #4caf50;
            --danger-color: #f44336;
            --warning-color: #ff9800;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: var(--text-color);
            line-height: 1.6;
        }
        
        header {
            background-color: var(--primary-color);
            color: white;
            padding: 1.5rem;
            text-align: center;
            border-radius: 24px;
            box-shadow: var(--shadow);
            margin: 20px auto;
            max-width: 1200px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .tabs {
            display: flex;
            background-color: var(--secondary-color);
            border-radius: 24px;
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
        }
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 20px;
            font-weight: 500;
            color: var(--text-color);
        }
        
        .tab.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        .tab-content {
            display: none;
            background-color: var(--secondary-color);
            padding: 25px;
            border-radius: 24px;
            box-shadow: var(--shadow);
        }
        
        .tab-content.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        input[type="text"],
        input[type="date"],
        input[type="time"],
        select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--border-color);
            border-radius: 18px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input[type="text"]:focus,
        input[type="date"]:focus,
        input[type="time"]:focus,
        select:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 24px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--accent-color);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(31, 30, 51, 0.2);
        }
        
        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #d32f2f;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(244, 67, 54, 0.3);
        }
        
        .btn-success {
            background-color: var(--success-color);
            color: white;
        }
        
        .btn-success:hover {
            background-color: #388e3c;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(76, 175, 80, 0.3);
        }
        
        .btn-warning {
            background-color: var(--warning-color);
            color: white;
        }
        
        .btn-warning:hover {
            background-color: #e65100;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(255, 152, 0, 0.3);
        }
        
        .log-entry {
            background-color: var(--secondary-color);
            border: 1px solid var(--border-color);
            border-radius: 24px;
            margin-bottom: 20px;
            padding: 20px;
            box-shadow: var(--shadow);
        }
        
        .log-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
            border-radius: 12px;
        }
        
        .log-date {
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .log-content, .log-feelings {
            margin-top: 15px;
        }
        
        .log-content div, .log-feelings div {
            white-space: pre-line; /* 保留换行 */
            text-align: left; /* 左对齐 */
        }
        
        img {
            max-width: 100%;
            height: auto;
            margin: 15px 0;
            border-radius: 12px;
            display: block;
        }
        
        .export-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }
        
        .export-dialog-content {
            background-color: var(--secondary-color);
            padding: 30px;
            border-radius: 24px;
            width: 80%;
            max-width: 500px;
            box-shadow: var(--shadow);
        }
        
        .export-dialog h2 {
            margin-bottom: 20px;
            color: var(--primary-color);
            text-align: center;
        }
        
        .export-form-group {
            margin-bottom: 15px;
        }
        
        .export-dialog-footer {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 25px;
        }
        
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: #888;
            border-radius: 36px;
            background-color: var(--secondary-color);
            box-shadow: var(--shadow);
        }
        
        h2 {
            color: var(--primary-color);
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .editor-toolbar {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        
        .editor-toolbar button {
            padding: 8px 15px;
            border: none;
            background-color: var(--primary-color);
            color: white;
            border-radius: 18px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .editor-toolbar button:hover {
            background-color: var(--accent-color);
        }

        .rich-text-editor {
            min-height: 150px;
            border: 2px solid var(--border-color);
            border-radius: 18px;
            padding: 15px;
            width: 100%;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
            font-size: 16px;
            line-height: 1.6;
        }

        .rich-text-editor:focus {
            outline: none;
            border-color: var(--primary-color);
        }
    </style>
</head>
<body>
    <header>
        <h1>第11组实习日志</h1>
    </header>
    
    <div class="container">
        <div class="tabs">
            <div class="tab active" id="create-tab">创建日志</div>
            <div class="tab" id="view-tab">查看日志</div>
            <div class="tab" id="export-tab">导出日志</div>
        </div>
        
        <!-- 创建日志标签页 -->
        <div class="tab-content active" id="create-content">
            <form id="log-form">
                <div class="form-group">
                    <label for="log-date">实习日期</label>
                    <input type="date" id="log-date" required>
                </div>
                
                <div class="form-group">
                    <label for="log-start-time">开始时间</label>
                    <input type="time" id="log-start-time" required>
                </div>
                
                <div class="form-group">
                    <label for="log-end-time">结束时间</label>
                    <input type="time" id="log-end-time" required>
                </div>
                
                <div class="form-group">
                    <label>当天实习内容</label>
                    <div class="editor-toolbar">
                        <button type="button" id="bold-btn" title="加粗">B</button>
                        <button type="button" id="italic-btn" title="斜体">I</button>
                        <button type="button" id="underline-btn" title="下划线">U</button>
                        <button type="button" id="insert-image-btn" title="插入图片">图片</button>
                        <button type="button" id="insert-file-btn" title="插入文件">文件</button>
                    </div>
                    <div id="log-content" class="rich-text-editor" contenteditable="true"></div>
                </div>
                
                <div class="form-group">
                    <label>收获体会</label>
                    <div class="editor-toolbar">
                        <button type="button" id="bold-feeling-btn" title="加粗">B</button>
                        <button type="button" id="italic-feeling-btn" title="斜体">I</button>
                        <button type="button" id="underline-feeling-btn" title="下划线">U</button>
                        <button type="button" id="insert-image-feeling-btn" title="插入图片">图片</button>
                        <button type="button" id="insert-file-feeling-btn" title="插入文件">文件</button>
                    </div>
                    <div id="log-feelings" class="rich-text-editor" contenteditable="true"></div>
                </div>
                
                <button type="submit" class="btn btn-primary">保存日志</button>
            </form>
        </div>
        
        <!-- 查看日志标签页 -->
        <div class="tab-content" id="view-content">
            <div id="logs-container" class="empty-state">
                <p>暂无实习日志，点击"创建日志"开始记录</p>
            </div>
        </div>
        
        <!-- 导出日志标签页 -->
        <div class="tab-content" id="export-content">
            <div id="export-container" class="empty-state">
                <p>暂无实习日志可导出，先记录一些日志吧</p>
            </div>
            
            <div class="export-dialog" id="export-dialog">
                <div class="export-dialog-content">
                    <h2>导出实习日志</h2>
                    <div class="export-form-group">
                        <label for="export-file-name">文件名</label>
                        <input type="text" id="export-file-name" value="实习日志" required>
                    </div>
                    <div class="export-dialog-footer">
                        <button type="button" class="btn btn-danger" id="cancel-export">取消</button>
                        <button type="button" class="btn btn-success" id="confirm-export">导出</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let logs = JSON.parse(localStorage.getItem('internshipLogs')) || [];
        
        // DOM 元素
        const createTab = document.getElementById('create-tab');
        const viewTab = document.getElementById('view-tab');
        const exportTab = document.getElementById('export-tab');
        const createContent = document.getElementById('create-content');
        const viewContent = document.getElementById('view-content');
        const exportContent = document.getElementById('export-content');
        const logForm = document.getElementById('log-form');
        const logDate = document.getElementById('log-date');
        const logStartTime = document.getElementById('log-start-time');
        const logEndTime = document.getElementById('log-end-time');
        const logContent = document.getElementById('log-content');
        const logFeelings = document.getElementById('log-feelings');
        const logsContainer = document.getElementById('logs-container');
        const exportContainer = document.getElementById('export-container');
        const exportDialog = document.getElementById('export-dialog');
        const exportFileName = document.getElementById('export-file-name');
        const cancelExport = document.getElementById('cancel-export');
        const confirmExport = document.getElementById('confirm-export');
        
        // 富文本编辑器工具栏按钮
        const boldBtn = document.getElementById('bold-btn');
        const italicBtn = document.getElementById('italic-btn');
        const underlineBtn = document.getElementById('underline-btn');
        const insertImageBtn = document.getElementById('insert-image-btn');
        const insertFileBtn = document.getElementById('insert-file-btn');
        
        const boldFeelingBtn = document.getElementById('bold-feeling-btn');
        const italicFeelingBtn = document.getElementById('italic-feeling-btn');
        const underlineFeelingBtn = document.getElementById('underline-feeling-btn');
        const insertImageFeelingBtn = document.getElementById('insert-image-feeling-btn');
        const insertFileFeelingBtn = document.getElementById('insert-file-feeling-btn');
        
        // 设置当前日期为默认值
        logDate.valueAsDate = new Date();
        
        // 标签页切换
        createTab.addEventListener('click', () => {
            createTab.classList.add('active');
            viewTab.classList.remove('active');
            exportTab.classList.remove('active');
            createContent.classList.add('active');
            viewContent.classList.remove('active');
            exportContent.classList.remove('active');
        });
        
        viewTab.addEventListener('click', () => {
            viewTab.classList.add('active');
            createTab.classList.remove('active');
            exportTab.classList.remove('active');
            viewContent.classList.add('active');
            createContent.classList.remove('active');
            exportContent.classList.remove('active');
            renderLogs();
        });
        
        exportTab.addEventListener('click', () => {
            exportTab.classList.add('active');
            createTab.classList.remove('active');
            viewTab.classList.remove('active');
            exportContent.classList.add('active');
            createContent.classList.remove('active');
            viewContent.classList.remove('active');
            updateExportContainer();
        });
        
        // 富文本编辑器功能
        boldBtn.addEventListener('click', () => {
            document.execCommand('bold', false, null);
        });
        
        italicBtn.addEventListener('click', () => {
            document.execCommand('italic', false, null);
        });
        
        underlineBtn.addEventListener('click', () => {
            document.execCommand('underline', false, null);
        });
        
        insertImageBtn.addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.click();
            
            input.onchange = function() {
                const file = input.files[0];
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.maxWidth = '100%';
                    img.style.height = 'auto';
                    img.style.margin = '15px 0';
                    img.style.borderRadius = '12px';
                    img.style.display = 'block';
                    
                    const selection = window.getSelection();
                    const range = selection.getRangeAt(0);
                    range.deleteContents();
                    range.insertNode(img);
                };
                
                reader.readAsDataURL(file);
            };
        });
        
        insertFileBtn.addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.click();
            
            input.onchange = function() {
                const file = input.files[0];
                // 创建一个链接元素
                const link = document.createElement('a');
                link.href = URL.createObjectURL(file);
                link.download = file.name;
                link.textContent = file.name;
                
                // 将链接插入到编辑器中
                const selection = window.getSelection();
                const range = selection.getRangeAt(0);
                range.deleteContents();
                range.insertNode(link);
            };
        });
        
        // 为收获体会编辑器添加相同的按钮功能
        boldFeelingBtn.addEventListener('click', () => {
            document.execCommand('bold', false, null);
        });
        
        italicFeelingBtn.addEventListener('click', () => {
            document.execCommand('italic', false, null);
        });
        
        underlineFeelingBtn.addEventListener('click', () => {
            document.execCommand('underline', false, null);
        });
        
        insertImageFeelingBtn.addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.click();
            
            input.onchange = function() {
                const file = input.files[0];
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.maxWidth = '100%';
                    img.style.height = 'auto';
                    img.style.margin = '15px 0';
                    img.style.borderRadius = '12px';
                    img.style.display = 'block';
                    
                    const selection = window.getSelection();
                    const range = selection.getRangeAt(0);
                    range.deleteContents();
                    range.insertNode(img);
                };
                
                reader.readAsDataURL(file);
            };
        });
        
        insertFileFeelingBtn.addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.click();
            
            input.onchange = function() {
                const file = input.files[0];
                // 创建一个链接元素
                const link = document.createElement('a');
                link.href = URL.createObjectURL(file);
                link.download = file.name;
                link.textContent = file.name;
                
                // 将链接插入到编辑器中
                const selection = window.getSelection();
                const range = selection.getRangeAt(0);
                range.deleteContents();
                range.insertNode(link);
            };
        });
        
        // 保存日志
        logForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const date = logDate.value;
            const startTime = logStartTime.value;
            const endTime = logEndTime.value;
            const content = logContent.innerHTML;
            const feelings = logFeelings.innerHTML;
            
            const log = {
                id: Date.now(),
                date: date,
                startTime: startTime,
                endTime: endTime,
                content: content,
                feelings: feelings,
                createdAt: new Date().toISOString()
            };
            
            logs.push(log);
            localStorage.setItem('internshipLogs', JSON.stringify(logs));
            
            // 重置表单
            logForm.reset();
            // 重置富文本编辑器
            logContent.innerHTML = '';
            logFeelings.innerHTML = '';
            
            // 显示成功消息
            alert('实习日志保存成功！');
            
            // 切换到查看日志标签页
            viewTab.click();
            renderLogs();
        });
        
        // 渲染日志列表
        function renderLogs() {
            if (logs.length === 0) {
                logsContainer.innerHTML = `
                    <div class="empty-state">
                        <p>暂无实习日志，点击"创建日志"开始记录</p>
                    </div>
                `;
                return;
            }
            
            logsContainer.innerHTML = '';
            
            // 按日期排序，最新的在前面
            const sortedLogs = [...logs].sort((a, b) => new Date(b.date) - new Date(a.date));
            
            sortedLogs.forEach(log => {
                const logElement = document.createElement('div');
                logElement.className = 'log-entry';
                logElement.dataset.id = log.id;
                
                const dateObj = new Date(log.date);
                const formattedDate = `${dateObj.getFullYear()}年${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
                
                logElement.innerHTML = `
                    <div class="log-header">
                        <div class="log-date">${formattedDate} ${log.startTime} - ${log.endTime}</div>
                    </div>
                    <div class="log-content"><strong>实习内容</strong><div>${log.content}</div></div>
                    <div class="log-feelings"><strong>收获体会</strong><div>${log.feelings}</div></div>
                `;
                
                const actionsDiv = document.createElement('div');
                actionsDiv.className = 'log-actions';
                
                const deleteBtn = document.createElement('button');
                deleteBtn.className = 'btn btn-danger';
                deleteBtn.textContent = '删除';
                deleteBtn.addEventListener('click', function() {
                    deleteLog(log.id);
                });
                
                actionsDiv.appendChild(deleteBtn);
                logElement.appendChild(actionsDiv);
                
                logsContainer.appendChild(logElement);
            });
        }
        
        // 删除日志
        function deleteLog(id) {
            if (confirm('确定要删除这条实习日志吗？')) {
                logs = logs.filter(log => log.id !== id);
                localStorage.setItem('internshipLogs', JSON.stringify(logs));
                renderLogs();
                updateExportContainer();
            }
        }
        
        // 更新导出容器
        function updateExportContainer() {
            if (logs.length === 0) {
                exportContainer.innerHTML = `
                    <div class="empty-state">
                        <p>暂无实习日志可导出，先记录一些日志吧</p>
                    </div>
                `;
            } else {
                exportContainer.innerHTML = `
                    <button type="button" class="btn btn-warning" id="export-button">
                        导出所有实习日志
                    </button>
                `;
                
                document.getElementById('export-button').addEventListener('click', function() {
                    exportDialog.style.display = 'flex';
                });
            }
        }
        
        // 取消导出
        cancelExport.addEventListener('click', function() {
            exportDialog.style.display = 'none';
        });
        
        // 确认导出
        confirmExport.addEventListener('click', function() {
            const fileName = exportFileName.value || '实习日志';
            exportLogs(fileName);
            exportDialog.style.display = 'none';
        });
        
        // 导出日志
        function exportLogs(fileName) {
            // 创建新的HTML文档内容
            let exportHtml = `
                <!DOCTYPE html>
                <html lang="zh-CN">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>${fileName}</title>
                    <style>
                        body {
                            font-family: 'Arial', sans-serif;
                            line-height: 1.6;
                            max-width: 800px;
                            margin: 0 auto;
                            padding: 20px;
                        }
                        header {
                            background-color: #1f1e33;
                            color: white;
                            padding: 20px;
                            text-align: center;
                            margin-bottom: 30px;
                            border-radius: 24px;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                        }
                        .log-entry {
                            border: 1px solid #ddd;
                            border-radius: 24px;
                            padding: 20px;
                            margin-bottom: 20px;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                        }
                        .log-header {
                            margin-bottom: 15px;
                            padding-bottom: 15px;
                            border-bottom: 1px solid #ddd;
                            border-radius: 12px;
                        }
                        .log-date {
                            font-weight: bold;
                        }
                        .log-content {
                            margin-top: 15px;
                        }
                        .log-feelings {
                            margin-top: 15px;
                        }
                        .log-content img,
                        .log-feelings img {
                            max-width: 100%;
                            height: auto;
                            margin: 15px 0;
                            border-radius: 12px;
                        }
                        .log-content a,
                        .log-feelings a {
                            color: #1f1e33;
                            text-decoration: none;
                        }
                        .log-content a:hover,
                        .log-feelings a:hover {
                            text-decoration: underline;
                        }
                    </style>
                </head>
                <body>
                    <header>
                        <h1>第11组实习日志</h1>
                    </header>
            `;
            
            exportHtml += '<div class="logs-container">';
            
            logs.forEach(log => {
                const dateObj = new Date(log.date);
                const formattedDate = `${dateObj.getFullYear()}年${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
                
                exportHtml += `
                    <div class="log-entry">
                        <div class="log-header">
                            <div class="log-date">${formattedDate} ${log.startTime} - ${log.endTime}</div>
                        </div>
                        <div class="log-content"><strong>实习内容：</strong><div>${log.content}</div></div>
                        <div class="log-feelings"><strong>收获体会：</strong><div>${log.feelings}</div></div>
                    </div>
                `;
            });
            
            exportHtml += '</div></body></html>';
            
            // 创建下载链接
            const blob = new Blob([exportHtml], { type: 'text/html' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `${fileName}.html`;
            a.click();
            URL.revokeObjectURL(url);
        }
        
        // 初始化页面
        renderLogs();
        updateExportContainer();
    </script>
</body>
</html>